\section{Software Ontwerp}
\label{sec:software}

\subsection{Android}
\label{sec:software-android}

Koen startte aan de implemetatie van Android en Sander werkte dit verder af.  In appendix \ref{app:android} staat figuur \ref{fig:android} die het klassendiagramma toont hoe de applicatie in Android is opgebouwd.

Alle \cc{Activities} die in de \cc{Android} app gebruikt worden staan de de activities-package.  Om het klassendiagramma niet verder uit te breiden zijn de superklassen van de \cc{Activities} aangegeven tussen \cc{<<} en \cc{>>}.  \cc{Main} is de \cc{Activity} die altijd op de voorgrond blijft.  Deze bevat de tabs naar drie andere \cc{Activities}, namelijk \cc{HomeActivity},  \cc{TodoActivity} en \cc{CoursesActivity}.  In de \cc{Main} klasse wordt met een publieke statische variabele \cc{Student} bijgehouden wie de applicatie aan het gebruiken is.  \cc{AuthActivity} zal bij het opstarten van de app de gebruiker authenticeren via een \cc{Twitter}-login en de \cc{Student} variabele van \cc{Main} invullen.

\cc{TodoActivity} is een oplijsting van alle todos die de gebruiker heeft opgegeven.  \cc{CoursesActivity} bevat een lijst van \cc{Activities} (het is een \cc{ActivityGroup}), namelijk \cc{CourseActivities}.  Een \cc{CourseActivity} stelt een vakpagina voor.  

De items in de lijst van een \cc{ListActivity} zijn gemodelleerd als \cc{Records}.  De verschillende \cc{Records} staan in de records-package.  Hoe een \cc{Record} op een lijstitem wordt gemapt staat in een \cc{RecordAdapter}.  De verschillende \cc{RecordAdapters} staan in de adapters-package.\footnote{Deze wijze om de \cc{ListView} van een \cc{ListActivity} op te maken staat beschreven op \url{http://codehenge.net/blog/2011/05/customizing-android-listview-item-layout/}}.  

In de utils-package staat de \cc{ActivityStream} en zijn subklasse \cc{CourseActivityStream}.  Een stream hoort bij één specifieke \cc{Student} en genereert een lijst van \cc{ActivityRecords}.  Deze \cc{ActivityRecords} worden uit de backend uitgelezen en kunnen \cc{Tweets},  \cc{Blogs} of \cc{Questions} zijn.  De \cc{HomeActivity} bevat een \cc{ActivityStream}.  Alle \cc{ActivityRecords} van de stream worden aan de \cc{ActivityRecordAdapter} gegeven.  
Analoog worden de activities per vak gegenereerd.  Een \cc{CourseActivity} zal een \cc{CourseActivityStream} hebben die enkel \cc{ActivityRecords} horend bij dat vak teruggeeft. 

Bij de \cc{HomeActivity} en \cc{CourseActivity} hoort ook een \cc{Leaderboard}.  Het \cc{Leaderboard} van de \cc{HomeActivity} zal de top tien van alle studenten in de datastore weergeven.  Het \cc{Leaderboard} van een \cc{CourseActivity} houdt enkel rekening met de \cc{Students} die zijn ingeschreven voor dat vak.  Een \cc{Leaderboard} tonen gebeurd aan de hand van een Android \cc{Dialog}.  Op een vakpagina kan je vragen stellen,  inchecken en twitteren.  Ook deze drie interacties met de gebruiker gebeuren via \cc{Dialogs}.  Antwoorden op een vraag kan door op de vraag in de stream te klikken.  Je komt dan terrecht op de \cc{ResponseActivity} van deze vraag.  Hier kan je antwoorden op de vraag of andere antwoorden beoordelen.  Beide acties zorgen voor schrijfoperaties naar de datastore.         

Alle \cc{ActivityRecords} kunnen als todo worden opgegeven door op de \emph{add todo} knop,  horend bij deze activity,  te drukken.  Hierdoor wordt de \cc{AddTodoActivity} gestart.  Er wordt gevraagd een beschrijving en deadline van de todo op te geven.  Bij bevestiging zal de todo naar de datastore worden geschreven en zichtbaar worden in de \cc{TodoActivity}.


\subsection{iOS}
\label{sec:software-ios}

\subsubsection{Algemene implementatie}
\label{sec:iOS-alg}

Zoals al eerder vermeld, wordt er in \cc{iOS} gebruik gemaakt van een \cc{storyboard}. Dit geeft een overzicht weer van alle schermen met de bijhorende controllers. Voor elk scherm is een \cc{controller} opgesteld. Deze kunnen in het \cc{storyboard} aan elkaar gekoppeld worden. Zo zijn er verscheidene list controllers die zorgen voor een lijstweergave van bepaalde \cc{entities}. Dan zijn er nog enkele andere controllers die zorgen voor het toevoegen van bepaalde entities aan de datastore. In de onderstaande figuur wordt er een beknopt overzicht gegegeven van het storyboard. 
\begin{description}

	\item [TabBarController] Geeft de tabs weer in de applicatie. Dit zijn de Home-tab, Courses-tab \& Todo-tab.
	\item [NavigationControllers] Voor elke tab wordt een NavigationController aangemaakt zodat de applicatie  kan bijhouden waar de gebruiker aan het navigeren is in de applicatie.
	\item [HomeViewController] Hier wordt een lijst van notificaties weergegeven (tweets, vragen \& blogitems) gesorteerd op datum. Als er op een notificatie geklikt wordt, wordt men doorverwezen naar de \cc{AddTodoController}. Ook kan het algemeen leader board geraadpleegd worden op de \cc{HomeViewController}.
	\item [LeaderBoardViewController] Hier wordt het algemeen scorebord weergegeven van alle studenten die uit de datastore gehaald worden.
	\item	[AddTodoController] Op dit scherm staat een invulformulier waarop de details van het todo-item kunnen worden ingevuld.
	\item	[CourseListController] Hier wordt een lijst van alle cursussen van de ingelogde gebruiker weergegeven. Als er op een vak geklikt wordt, gaat de \cc{CoursePageController} dynamisch worden ingeladen met de informatie van het aangeklikte vak.
	\item	[CoursePageController] Op de vakpagina wordt een lijst van notificaties weergegeven gefilterd voor dat vak. Ook kan er hier een leaderboard geraadpleegd worden met de studenten van dat vak. Er kan ook een lijst met vragen worden opgevraagd van het geselecteerde vak. Dit navigeert de gebruiker naar de \cc{QuestionListController}. Verder kan er via de integratie met \cc{twitter} getweet worden voor het specifieke vak. 
	\item	[LeaderBoardCourseViewController] Per vak wordt er een scorebord weergegeven voor alle studenten die ingeschreven zijn voor dat vak.
	\item	[QuestionListController] Hier wordt een lijst van vragen weergegeven van een bepaald vak. Men kan op dit scherm vragen toevoegen waardoor er naar de \cc{AddQuestionController} zal genavigeerd worden. Als er naar een vraag met zijn antwoorden wil genavigeerd worden, moet er enkel op de vraag geklikt worden. Hierdoor komt men uit op de \cc{QuestionPageViewController}.
	\item	[AddQuestionController] Voor een bepaald vak kan een vraag worden toegevoegd, die dan naar de datastore gestuurd zal worden.
	\item	[QuestionPageViewController] Een vraag wordt op dit scherm weergegeven samen met een lijst van antwoorden op deze vraag. Het is zelf ook mogelijk om op deze vraag een antwoord te geven dankzij de \cc{AddAnswerController}.
	\item	[AddAnswerController] Via deze controller kan er een antwoord gegeven worden aan een bepaalde vraag.
\end{description}
Figuur \ref{fig:storyboard} in appendix \ref{app:ios} toont het storyboard van de applicatie.
 

\subsubsection{Gebruik van Entities}
\label{sec:iOS-ent}
Voor het ophalen van gegevens uit de datastore, is gebruik gemaakt van verschillende entities: Questions, Answers \& Todos.
Voor het gebruiksgemak hebben we voor al deze entities een interface Item gemaakt. Hier maken ook de tweets \& de blogitems gebruik van in de applicatie. Elke entity heeft een title, date en een description. Het hangt dan van type tot type hoe deze waarden ingevuld worden. 
Waarom hebben we dit nu gedaan? In iOS moet een entity die wordt weergegeven in een lijst, ook een Cell-klasse hebben. Om het overzichtelijk te houden, hebben we slechts 1 Cell-klasse gemaakt die aan alle entities gekoppeld wordt. 

Figuur \ref{fig:item} toont hoe de interface Item samenhangt met de rest van de entities van de applicatie.
 

\begin{figure}[h!]
  \centering
  \includegraphics[scale=0.4]{img/item.jpg}
  \caption{Item interface in iOS applicatie}
  \label{fig:item}
\end{figure}

\subsection{HTML5}
\label{sec:software-html5}
In deze sectie wordt de HTML5 implementatie besproken. Sander was begonnen met HTML5. Na de overdracht is Glenn hiermee verdergegaan.
Het resultaat is te vinden op \url{http://mumesint.appspot.com}. Inloggen kan via Twitter, er is geen verdere registratie nodig. Eenmaal ingelogd moet
een gebruiker enkel nog vakken toevoegen. Dit kan via de Courses knop links bovenaan.

\subsubsection{Structuur}
\label{sec:html5-structuur}
Alle pagina's die zichtbaar zijn (ook pop-ups) zijn beschreven in \cc{index.html}.
Elke pagina heeft zo zijn eigen \cc{div} met een attribuut \cc{data-role="page"}.
Een andere optie was om elke pagina in een ander bestand te steken, maar aangezien de kleine omvang van de pagina's
 (vaak slechts 15 regels HTML) en de relatief kleine totale omvang van alle pagina's samen (een 350-tal regels), is er gekozen om alles samen te houden in \'e\'en bestand.
Zo worden alle statische onderdelen van de applicatie in één keer geladen en kunnen gebruikers vlotter tussen pagina's navigeren. Dit in tegenstelling tot telkens een request naar de server sturen
om een nieuw HTML-bestand op te halen.

De dynamische aspecten van de applicatie worden beschreven in het Javascript bestand \cc{global.js}. Hierin zit een \cc{init()}-methode die alles initialiseert en listeners plaatst op knoppen.
Die listeners roepen methodes op die de pagina's voorzien van de juiste data van de back-end.

Voorbeeld: aan de \cc{Courses}-knop hangt een listener die een \cc{loadCourses}-methode oproept.
Deze methode doet dan een JSON-request\footnote{http://mumesint.appspot.com/api/entries/enrollment/coursesofstudent?studentid=Student(86007)} naar de back-end. De back-end stuurt dan de
courses van de gebruiker terug in JSON-formaat en in de callbac-functie k van de JSON-request wordt dan de \cc{courseslist} listview ingevuld.

Verder zijn er nog enkele globale variabelen in \cc{global.js} gedefinieerd. Deze
houden informatie bij over de ingelogde student, wat de huidige course is, welke question de gebruiker selecteert enz. Ook de Javascript zou opgesplitst kunnen worden in verschillende bestanden, maar momenteel
bestaat de code enkel uit een \cc{init} methode en enkele \cc{load...}-methodes. Gezien de lage complexiteit en grootte van de code (slechts een 300-tal regels), is er besloten om alle code in \'e\'en bestand te houden.

\subsubsection{Interactie met back-end}
\label{sec:html5-backend}
Net zoals bij de andere technologieën wordt data die van de back-end komt, verzonden in JSON-formaat (via GET of POST-requests). In Javascript zijn deze JSON-objecten heel makkelijk bruikbaar, de velden zijn onmiddellijk beschikbaar. Als er bijvoorbeeld een student wordt
opgehaald kan je onmiddellijk aan zijn naam via \cc{student.naam}. Data verzenden naar de back-end gebeurt met \cc{\$.post}. Deze methode doet een POST-request via AJAX naar de back-end, eventueel kan ook een callback meegegeven worden.

\subsubsection{Integratie met Twitter}
\label{sec:html5-twitter}
De HTML5-applicatie is ook ge\"integreerd met Twitter. Gebruikers kunnen inloggen via hun Twitter-account. Binnen ons systeem dient de Twitter-username als identificatie van personen.
Er kan ook getweet worden vanuit de applicatie. De hashtag van het vak waarover ze tweeten staat dan in het tekstvak. Het is aan de gebruiker zelf of ze de tag laten staan of niet.
Inloggen en tweeten vanuit de applicatie gebeurt via het \cc{Twitter @Anywhere}\footnote{https://dev.twitter.com/docs/anywhere}-framework.
Tweets in de streams op de home- en vakpagina's komen niet rechtstreeks van Twitter, maar van de back-end. De back-end controleert Twitter elke 15 minuten en slaagt nieuwe Tweets op in de database.

\subsubsection{Niet ge\"implementeerd}
\label{sec:html5-nietgeimplementeerd}
Aanvankelijk was het de bedoeling dat gebruikers achievements (beloningen, medailles) konden verdienen voor verschillende activiteiten, bijvoorbeeld 10 keer op rij inchecken in de les.
Deze functionaliteit bleek echter niet zo simpel om te implementeren. Hiervoor zouden veel data en statistieken moeten bijgehouden worden. Voordat deze functie ge\"implementeerd kon worden, moesten eerst alle basisfunctionaliteit aanwezig zijn. Aangezien deze functie ook een lagere prioriteit had, besloten we dit als iets extra te beschouwen, iets wat achteraf nog ge\"implementeerd kon worden indien er tijd over was. Ook inchecken in de les was van lagere prioriteit en heeft het jammer genoeg (net) niet gehaald binnen het tijdsbestek.

\subsubsection{Bugs en mogelijke verbeteringen}
\label{sec:html5-verbeteringen}
In de finale versie zijn nog enkele bugs aanwezig. Zo wordt er geen dynamische data getoond als de gebruiker een pagina ververst. Dit komt omdat de data wordt ingeladen als er op een knop geklikt wordt, de listener van het click event van de knop roept de \cc{load...}-methode op.
Hetzelfde probleem doet zich voor als de gebruiker naar een externe site surft en dan op de 'back'-knop van de browser duwt. Ook kan het soms lang duren totdat de back-end reageert. Dit probleem doet zich voor als er geen 'instances' van onze back-end actief zijn op App Engine.
App Engine moet dan nieuwe instanties van onze applicatie opstarten en het kan soms zelfs tot 45 seconden duren om een request af te handelen. Requests die daarop volgen zijn wel sneller, aangezien er dan een instantie actief is. Een laatste probleem met onze applicatie is een
veiligheidsprobleem. Iedereen kan in principe aan alle data van onze applicatie (en zelfs alle data aanpassen) door naar de gepaste URL's te surfen. Veiligheid was echter geen prioriteit in dit project. We zijn er van uitgegaan dat iedereen enkel de client-applicaties gebruikt.

Een mogelijke verbetering zou zijn om de gelijkaardige code in de javascript weg te werken. Het zou mogelijk zijn om een generische\cc{'loadList'} methode te voorzien om zo de code compacter en herbruikbaarder te maken.

